<template>
	<view class="headerBg">
		<uv-navbar title="我的" :placeholder="true" :leftIcon="leftIcon" bgColor="rgba(0,0,0,0)"></uv-navbar>
		<view class="userHeader flex" @click="$util.redirectTo('/pages/login/login')" v-if="!token">
			<image src="/static/userNone.png" mode=""></image>
			<view class="m-l-20">
				<view class="font-34 font-weight m-b-10">未登录</view>
			</view>
		</view>
		<view class="userHeader flex" @click="$util.redirectTo('/otherpages/editUserInfo/editUserInfo')" v-else>
			<image :src="$util.img(userInfo.avatar)" v-if="userInfo.avatar" mode=""></image>
			<image src="/static/userNone.png" mode="" v-else></image>
			<view class="m-l-20">
				<view class="font-34 font-weight m-b-10">{{userInfo.nickname||'微信用户'}}</view>
				<view class="font-24 grey" v-if="userInfo.id">ID：{{userInfo.id}}</view>
			</view>
		</view>


		<!-- 我的商铺 -->
		<block v-if="myShopList.length">
			<view class="flex_b p-30">
				<view class="font-32 font-weight">我的商铺</view>
				<view class="grey font-24" @click="$util.redirectTo('/otherpages/myShopHire/myShopHire')">查看全部<text
						class="iconfont icon-xiangyoujiantou" style="font-size: 24rpx;"></text>
				</view>
			</view>
			<swiper class="swiper" :autoplay="false" :indicator-dots="true" :circular="false" :interval="3000"
				:duration="1000" :acceleration="true" :indicatorDots="false">
				<swiper-item v-for="(item,i) in myShopList" :key="i">
					<shopItem type="myShop" :item="item"></shopItem>
				</swiper-item>
			</swiper>
		</block>
		<!-- 我的选址求租 -->
		<block v-if="mysitingrent.length">
			<view class="flex_b p-30">
				<view class="font-32 font-weight">我的选址求租</view>
				<view class="grey font-24" @click="$util.redirectTo('/otherpages/myQiuZuList/myQiuZuList')">查看全部<text
						class="iconfont icon-xiangyoujiantou" style="font-size: 24rpx;"></text>
				</view>
			</view>
			<swiper class="swiper" :autoplay="false" :indicator-dots="true" :circular="false" :interval="3000"
				:duration="1000" :acceleration="true" :indicatorDots="false">
				<swiper-item v-for="(item,i) in mysitingrent" :key="i" >
					<view class="seekList">
						<view class="seekItem " @click="$util.redirectTo('/otherpages/seekDetali/seekDetali',{id:item.id})">
							<!-- 面议 -->
							<view class="flex_b">
								<view class="font-28">{{item.title||'暂无数据'}}</view>
								<view class="font-28 f-t" v-if="Number(item.total_price)">{{item.total_price||0}}元/月</view> 
								<view class="font-28 f-t" v-else>面议</view>
							</view>
							<view class="flex m-t-20">
								<view class="m-r-62">
									<view class="font-24 m-b-10">{{item.city||''}}{{item.district||''}}{{item.address||''}}</view>
									<view class="font-24 grey">位置</view>
								</view>
								<view class="m-r-62">
									<view class="font-24 m-b-10">{{arrs[Number(item.seeking_type)+1]}}</view>
									<view class="font-24 grey">类型</view>
								</view>
								<view class="">
									<view class="font-24 m-b-10">{{item.area}}m²</view>
									<view class="font-24 grey">面积</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</block>
		<!-- 我的厂房仓库 -->
		<block v-if="mystash.length">
			<view class="flex_b p-30">
				<view class="font-32 font-weight">我的厂房仓库</view>
				<view class="grey font-24" @click="$util.redirectTo('/otherpages/myCangku/myCangku')">查看全部<text
						class="iconfont icon-xiangyoujiantou" style="font-size: 24rpx;"></text>
				</view>
			</view>
			<swiper class="swiper" :autoplay="false" :indicator-dots="true" :circular="false" :interval="3000"
				:duration="1000" :acceleration="true" :indicatorDots="false">
				<swiper-item v-for="(item,i) in mystash" :key="i">
					<shopItem type="cangku" :item="item"></shopItem>
				</swiper-item>
			</swiper>
		</block>
		<!-- 常用功能 -->

		<view class="font-32 font-weight m-l-30 m-t-30">常用功能</view>
		<view class="funBox flex_c">
			<view v-for="(item,index) in funList" :key="index" class="flex_b" @click="routerFn(item)">
				<view class="flex">
					<image :src="item.image" mode="" class="w-64 h-64 bor-32 m-r-20"></image>
					<view class="font-28">{{item.title}}</view>
				</view>
				<view class="iconfont icon-xiangyoujiantou grey" style="font-size: 24rpx;"></view>
			</view>

			<button class="flex_b kefuItem" open-type="contact">
				<view class="flex">
					<image src="/static/myIconImg/7.png" mode="" class="w-64 h-64 bor-32 m-r-20"></image>
					<view class="font-28">客服中心</view>
				</view>
				<view class="iconfont icon-xiangyoujiantou grey" style="font-size: 24rpx;"></view>
			</button>

		</view>

		<view class="bottom-mar"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mystash:[],
				mysitingrent:[],
				search: '',
				lists: [],
				district: '',
				city: '',
				area: 'all',
				type: 'all',
				status: 'all',
				monthrent: 'all',
				userInfo: {},
				token: '',
				leftIcon: '',
				funList: [
					// {
					// 	image: require('../../static/myIconImg/1.png'),
					// 	title: '我的优惠券',
					// 	router: '/otherpages/myYhq/myYhq'
					// },
					{
						image: require('../../static/myIconImg/2.png'),
						title: '我的商铺推广师',
						router: '/otherpages/mySpread/mySpread'
					},
					{
						image: require('../../static/myIconImg/3.png'),
						title: '我的预约',
						router: '/otherpages/myYuYue/myYuYue'
					},
					{
						image: require('../../static/myIconImg/4.png'),
						title: '我的收藏',
						router: '/otherpages/collectShop/collectShop'
					},
					{
						image: require('../../static/myIconImg/5.png'),
						title: '意见反馈',
						router: '/otherpages/feedback/feedback'
					},
					// {
					// 	image: require('../../static/myIconImg/1.png'),
					// 	title: '领取优惠券',
					// 	router: '/otherpages/receiveYhq/receiveYhq'
					// },
					{
						image: require('../../static/myIconImg/6.png'),
						title: '关于我们',
						router: '/otherpages/aboutMy/aboutMy'
					}
				],
				myShopList: []
			};
		},
		onLoad() {

		},
		onShow() {
			uni.getStorage({
				key: 'city',
				success: res => {
					this.city = res.data
				},
				fail:err=> {
					this.city = ''
				}
			})
			uni.getStorage({
				key: 'token',
				success: res => {
					this.token = res.data
					this.getUserInfo()
					this.getMyShop()
					this.getMysitingrent()
					this.getMystash()
				},
				fail: err => {
					this.token = ''
					this.userInfo = {}
					this.myShopList = []
					this.mysitingrent = []
					this.mystash = []
				}
			})
		},
		methods: {
			
			// 我的商铺列表
			getMyShop() {
				this.$api.sendRequest({
					url: '/api/shop/myshop',
					data: {
						page: 1,
						num: 10,
						search: this.search,
						district: this.district,
						city: this.city,
						businessarea_id: '',
						status: this.status,
						monthrent: this.monthrent,
						area: this.area,
						type: this.type,
						transfer_fee: 'all',
						is_deal: 0,
						is_recommend: 0,
					},
					success: res => {
						console.log(res, '+++---');
						this.myShopList = res.data.data
					}
				})
			},
			// 我的选址求租列表
			getMysitingrent() {
				this.$api.sendRequest({
					url:'/api/sitingrent/mysitingrent',
					data:{
						page:1,
						num:100,
						search:'',
						city:this.city
					},
					success:res=>{
						this.mysitingrent = res.data.data
					}
				})
			},
			// 我的厂房仓库列表
			getMystash() {
				this.$api.sendRequest({
					url:'/api/stash/mystash',
					data:{
						page:1,
						num:100,
						search:'',
						city:this.city,
						district:'',
						monthrent:'all',
						area:'all',
						type:'all'
					},
					success:res=>{
						this.mystash = res.data.data
					}
				})
			},
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/user/index',
					success: res => {
						if (res.code == 1) {
							this.userInfo = res.data.userinfo
						}
					}
				})
			},
			// 常用功能的点击
			routerFn(item) {
				if(!this.token) {
					uni.showToast({
						title:'请先登录',
						icon:'error'
					})
					return
				}
				if (item.router) {
					this.$util.redirectTo(item.router)
				}
			}
		}
	}
</script>

<style lang="scss">
	.kefuItem {
		margin: 0;
		padding: 0;
		outline: none;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
		height: 64rpx;
	}

	.funBox {
		padding: 30rpx;
		width: 630rpx;
		height: 682rpx;
		opacity: 1;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(245, 246, 247, 1);
		border: 2rpx solid skyblue;
		box-shadow: 0rpx 4rpx 8rpx rgba(19, 19, 22, 0.04);
		margin: 25rpx auto;
	}

	.swiper {
		padding: 0 30rpx;
		width: 690rpx;
		height: 210rpx;

		swiper-item {
			// background-color: #f0f0f0;
			width: 606rpx !important;
			border-radius: 16rpx;
			// height: 170rpx;
			padding: 15rpx;
			box-sizing: border-box;
			left: 0rpx !important;
			border: 0.5px solid #efeff0;
			box-shadow: 0px 2px 4px 0px rgba(19, 19, 22, 0.04);
			// box-sizing: border-box;
		}
	}

	.userHeader {
		padding: 20rpx 30rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border: 2rpx solid rgba(255, 255, 255, 1);
			border-radius: 50%;
		}

	}

	.headerBg {
		width: 750rpx;
		height: 536rpx;
		opacity: 1;
		background: linear-gradient(180deg, rgba(255, 234, 234, 1) 0%, rgba(255, 255, 255, 1) 100%);
	}
</style>
